<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { imagePath, maskStyle } from '@/libs/file-utils'
import { clear, confirm, update, vipList, itemList, curVip, curItem } from './data'
import { userInfo } from '@/libs/user'

const img_bg = imagePath('pay/recharge/bg.jpg')
const img_avatar = imagePath('user/info/avatar.png')
const icon_vip = imagePath('user/info/icon-vip.png')
const img_card_bg = imagePath('pay/recharge/card-bg.png')
const icon_arrow = imagePath('pay/recharge/icon-arrow.svg')
const icon_item = imagePath('pay/recharge/icon-item.png')
const img_btn_bg = imagePath('pay/recharge/btn-bg.png')

onMounted(update)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="pay-recharge"
    :showTopBar="false"
  >
    <div
      class="recharge"
      :style="{ backgroundImage: img_bg }"
    >
      <div class="main-title">蒜瓣充值</div>

      <div class="user-bar">
        <div
          class="avatar"
          :style="{ backgroundImage: img_avatar }"
        ></div>
        <div class="right">
          <div class="nickname">
            {{ userInfo?.nickname }}
            <div
              v-if="userInfo?.vipStatus === 1"
              class="icon"
              :style="{ backgroundImage: icon_vip }"
            ></div>
          </div>
          <div class="vip">{{ userInfo?.vipStatus === 1 ? 'VIP' : '开通会员，即刻解锁全部特权' }}</div>
        </div>
      </div>

      <template v-if="vipList.length">
        <div class="sub-title">加入蒜蒜VIP</div>
        <template
          v-for="(item, idx) in vipList"
          :key="idx"
        >
          <div
            class="vip-item"
            :style="{ backgroundImage: img_card_bg }"
            @click="curVip = curVip === idx ? -1 : idx"
          >
            <div class="price">￥<span class="val">{{ item.price }}</span></div>
            <div class="name">{{ item.itemName }}</div>
            <div class="info">
              VIP专享优惠特权
              <span class="val">点击查看</span>
              <div
                class="arrow"
                :style="{ backgroundImage: icon_arrow }"
              ></div>
            </div>
            <div
              class="btn"
              @click.stop="confirm(item)"
            >立即开通</div>
          </div>

          <div
            v-if="curVip === idx"
            class="vip-detail"
          >
            {{ item.itemDesc }}
            <div
              class="fold"
              @click="curVip = -1"
            >
              收起
              <div
                class="arrow"
                :style="maskStyle(icon_arrow)"
              ></div>
            </div>
          </div>
        </template>
      </template>

      <template v-if="itemList.length">
        <div class="sub-title">充值蒜瓣</div>
        <div class="item-list">
          <div class="inner">
            <div
              v-for="(item, idx) in itemList"
              :key="idx"
              class="item"
              :class="{ active: curItem === idx }"
              @click="curItem = idx"
            >
              <div
                class="icon"
                :style="{ backgroundImage: icon_item }"
              ></div>
              <div class="amount">{{ item.amount }}蒜瓣</div>
              <div class="price">{{ item.discountPrice }}元</div>
            </div>
          </div>
        </div>
        <div
          class="pay"
          :style="{ backgroundImage: img_btn_bg }"
          @click="confirm(itemList[curItem])"
        >￥{{ itemList[curItem]?.discountPrice }}立即充值</div>
      </template>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.recharge {
  width: 100%;
  min-height: 100%;

  box-sizing: border-box;
  padding-top: 110rpx;

  background-color: #FEF6E7;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;


  .main-title {
    margin-left: 86rpx;

    color: #FF5101;
    font-size: 72rpx;
    line-height: 64rpx;
    text-shadow: 0 0 4rpx #fff, 0 0 4rpx #fff, 0 0 4rpx #fff;
  }

  .user-bar {
    width: 100%;

    box-sizing: border-box;
    padding: 56rpx 32rpx 36rpx;

    display: flex;

    .avatar {
      width: 120rpx;
      height: 140rpx;
    }

    .right {
      margin-top: 20rpx;
      margin-left: 20rpx;

      .nickname {
        display: flex;
        align-items: center;

        color: #230012;
        font-size: 40rpx;
        line-height: 40rpx;

        .icon {
          width: 32rpx;
          height: 26rpx;

          margin-left: 8rpx;
        }
      }

      .vip {
        margin-top: 10rpx;

        color: #754A42;
        font-size: 20rpx;
        line-height: 40rpx;
      }
    }
  }

  .sub-title {
    margin-top: 24rpx;
    margin-left: 32rpx;

    color: #230012;
    font-size: 32rpx;
    line-height: 40rpx;
  }

  .vip-item {
    position: relative;
    width: 686rpx;
    height: 170rpx;

    margin: 16rpx auto 0;

    .price {
      position: absolute;
      bottom: 48rpx;
      left: 28rpx;

      color: #FFF2CD;
      font-size: 32rpx;
      line-height: 32rpx;

      .val {
        font-size: 64rpx;
      }
    }

    .name {
      position: absolute;
      top: 28rpx;
      left: 156rpx;

      color: #fff;
      font-size: 40rpx;
      line-height: 40rpx;
    }

    .info {
      position: absolute;
      top: 90rpx;
      left: 156rpx;

      color: #fff;
      font-size: 24rpx;
      line-height: 32rpx;

      display: flex;
      align-items: center;

      .val {
        color: #FEF8AC;
      }

      .arrow {
        width: 26rpx;
        height: 24rpx;
      }
    }

    .btn {
      position: absolute;
      top: 50%;
      right: 28rpx;
      transform: translateY(-50%);

      width: 160rpx;
      height: 56rpx;

      border-radius: 28rpx;
      background-color: #FEF8AC;

      color: #E55800;
      font-size: 28rpx;
      line-height: 56rpx;
      text-align: center;
    }
  }

  .vip-detail {
    position: relative;
    width: 686rpx;

    margin: 20rpx auto 0;
    padding: 36rpx 0;

    border-radius: 32rpx;
    background-color: rgba(255, 164, 84, .4);

    color: #945D2C;
    font-size: 32rpx;
    line-height: 40rpx;
    text-align: center;
    white-space: pre;

    .fold {
      position: absolute;
      top: 0;
      right: 0;

      padding: 14rpx;

      display: flex;
      align-items: center;

      color: #541C02;
      font-size: 32rpx;
      line-height: 32rpx;

      .arrow {
        width: 26rpx;
        height: 26rpx;

        transform: rotateZ(-90deg);

        background-color: #541C02;
        mask-size: 100% 100%;
      }
    }
  }

  .item-list {
    width: 100%;

    margin-top: 16rpx;

    overflow-x: auto;
    touch-action: pan-x;

    .inner {
      box-sizing: border-box;
      padding: 0 32rpx;

      display: inline-flex;

      .item {
        width: 160rpx;

        &:not(:last-child) {
          margin-right: 16rpx;
        }

        padding: 16rpx 0;

        border-radius: 16rpx;
        border: 2rpx solid #DE5500;
        background-color: #FFE6C6;

        transition: background-color .3s;

        display: flex;
        flex-direction: column;
        align-items: center;

        &.active {
          background-color: #FFD2A6;
        }

        .icon {
          width: 86rpx;
          height: 86rpx;
        }

        .amount {
          margin-top: 10rpx;

          color: #E55800;
          font-size: 32rpx;
          line-height: 32rpx;
        }

        .price {
          width: 128rpx;
          height: 44rpx;

          margin-top: 12rpx;

          box-sizing: border-box;
          border-radius: 22rpx;
          border: 2rpx solid #E55800;
          background-color: rgba(255, 203, 107, .44);

          color: #E55800;
          font-size: 32rpx;
          line-height: 40rpx;
          text-align: center;
        }
      }
    }
  }

  .pay {
    width: 569rpx;
    height: 123rpx;

    margin: 60rpx auto;

    color: #A23406;
    font-size: 32rpx;
    line-height: 106rpx;
    text-align: center;
  }
}
</style>